<template>
  <div class="login-wrapper">
    <h3>大旺福供应商系统</h3>
    <mt-field label="手机号" type="tel" v-model="tel" placeholder="手机号"/></mt-field>
    <mt-field label="密码" type="password" v-model="pwd" placeholder="密码"/>
    <mt-button size="large" type="primary" v-on:click.native="login">登  录</mt-button>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Toast } from 'mint-ui'
  export default {
    components: {
    },
    data () {
      return {
        tel: '',
        pwd: ''
//        tel: '18651608569',
//        pwd: '123456'
      }
    },
    methods: {
      login: function () {
        if (this.tel === '') {
          Toast({
            message: '手机号不能为空',
            position: 'bottom',
            duration: 5000
          })
          return
        }
        if (this.pwd === '') {
          Toast({
            message: '密码不能为空',
            position: 'bottom',
            duration: 5000
          })
          return
        }
        var opt = {tel: this.tel, pwd: this.pwd}
        var url = process.env.BASE_API + '/supplier/user/login'
        this.$http.post(url, opt, {emulateJSON: true}).then(response => {
          var res = response.body
          Toast({
            message: res.message,
            position: 'bottom',
            duration: 5000
          })
          if (res.code === 1000) {
            sessionStorage.setItem(res.data.token, res.data.id)
            sessionStorage.setItem('supplier', res.data.token)
            this.$store.dispatch('setToken', res.data.token)
            this.$store.dispatch('setLogin', 1)
            this.$router.push({path: '/product'})
          }
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .login-wrapper
    padding: 30px 15px;
    text-align: center;
    .flex
      display: flex;
      .f1
        flex: 1;
</style>
